<ion-header>
  <ion-navbar [hideBackButton]="useAsModal">
    <ion-buttons left *ngIf="useAsModal">
      <button class="close-container disable-hover" (click)="closeModal()" ion-button>
        <ion-icon ios="md-close" md="md-close"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons right>
      <button class="send-max" *ngIf="isSendMaxButtonShown()" (click)="sendMax()" clear wide-header-bar-button ion-button>
        <span translate>Send max</span>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content class="add-bottom-safe-area" no-bounce>
  <div class="container">
    <div class="amount-content" [ngClass]="{'amount-content-fixed': fromBuyCrypto}">
      <div class="expression-container">
        <span *ngIf="expression; else noExpression" class="ellipsis expression" [ngClass]="{'small-font': useSmallFontSize}">
          <span *ngIf="isNumber(expression)">{{expression | number:'1.0-6'}}</span>
          <span *ngIf="!isNumber(expression)">{{expression}}</span>
        </span>
        <ng-template #noExpression>
          <span class="expression">
            {{ '0' }}
          </span>
        </ng-template>
        <span class="unit" [ngClass]="{'small-font': useSmallFontSize}" [hidden]="globalResult">{{unit}}</span>
      </div>
      <div class="amount" [hidden]="!globalResult">{{globalResult}} {{unit}}</div>
      <div class="result" *ngIf="(!fromBuyCrypto && wallet && wallet.coin && !currencyProvider.isCustomERCToken(wallet.coin)) || fromFooterMenu">&asymp;
        <span *ngIf="fiatCode === alternativeUnit">{{alternativeAmount || '0.00'}}</span>
        <span *ngIf="fiatCode !== alternativeUnit">{{alternativeAmount || '0'}}</span>
        {{alternativeUnit}}
      </div>
    </div>

    <div class="amount-switcher-margin" [ngClass]="{'fix-modal-switcher': useAsModal}" *ngIf="(!fromBuyCrypto && !isCardTopUp && wallet && wallet.coin && !currencyProvider.isCustomERCToken(wallet.coin)) || fromFooterMenu">
      <div class="amount-switcher">
        <div class="switcher" (click)="changeUnit()" [hidden]="fixedUnit" tappable>
          <img class="switcher__icon" src="assets/img/icon-swap.svg">
          <div class="switcher__label">{{unit}}</div>
        </div>
      </div>
    </div>

    <form class="amount-switcher-margin" [ngClass]="{'fix-modal-switcher': useAsModal}" [formGroup]="quoteForm" *ngIf="this.quoteForm && fromBuyCrypto">
      <div class="amount-switcher">
        <ion-select class="switcher select-options" [selectOptions]="selectOptions" okText="{{okText}}" cancelText="{{cancelText}}" formControlName="altCurrency" (ionChange)="altCurrencyChange()">
          <ion-option *ngFor="let fiatAltCurrency of altCurrenciesToShow" [value]="fiatAltCurrency">{{ fiatAltCurrency }}</ion-option>
          <ion-option *ngFor="let fiatAltCurrency of altCurrenciesToShow2" [value]="fiatAltCurrency">{{ fiatAltCurrency }}</ion-option>
        </ion-select>
      </div>
    </form>

    <div class="bottom-absolute">
      <pin-pad (keystroke)="pushDigit($event)" type="amount" [integersOnly]="onlyIntegers"></pin-pad>

      <button ion-button class="button-standard button-primary" [disabled]="!expression || !allowSend" (click)="finish()">
        <span>{{'Continue' | translate}}</span>
      </button>
    </div>
  </div>
</ion-content>